<template>
  <div style="width: 100%; height: 100%">
    <vxe-grid v-bind="gridOptions" class="my-grid66">
         <template #name_header>
        <div class="first-col">
          <div class="first-col-top">名称</div>
          <div class="first-col-bottom">类型</div>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        border: true,
        stripe: true,
        resizable: true,
        height: 500,
        // 分组列头，通过 children 定义子列
        columns: [
          { type: "seq", width: 50 },
          {
            title: "基本信息",
            children: [
              { field: "name", title: "Name", slots: { header: "name_header" },  minWidth:"100px",},
              {
                title: "其他信息",
                children: [
                  { field: "nickname", title: "Nickname", minWidth:"100px", },
                  { field: "age", title: "Age", sortable: true, minWidth:"100px", },
                ],
              },
              { field: "sex", title: "Sex" , minWidth:"100px",},
            ],
          },
          {
            field: "address",
            title: "Address",
            sortable: true,
            showOverflow: true,
             minWidth:"100px",
          },
        ],
        data: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "Man",
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "Women",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "Man",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "Women",
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "Women",
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: "Women",
            age: 21,
            address: "Shenzhen",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Test",
            sex: "Man",
            age: 29,
            address: "Shenzhen",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: "Man",
            age: 35,
            address: "Shenzhen",
          },
        ],
      },
    };
  },
};
</script>

<style>
.my-grid66 .alert-message {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.my-grid66 .alert-message-icon {
  width: 30px;
  text-align: center;
  color: #409eff;
  margin-right: 8px;
}
.my-grid66 .alert-message-content {
  flex-grow: 1;
  padding-right: 20px;
}
.my-grid66 .page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.my-grid66 .select-count {
  display: inline-block;
  vertical-align: middle;
}
.my-grid66 .my-input {
  width: 100%;
}
.my-grid66 .first-col {
  position: relative;
  height: 20px;
}
.my-grid66 .first-col:before {
  content: "";
  position: absolute;
  left: -2%;
  top: 2%;
  width: 105%;
  height: 1px;
  transform: rotate(10deg);
  background-color: rgba(31, 179, 255, 0.1);
}
.my-grid66 .first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -131%;
}
.my-grid66 .first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -131%;
}
</style>